<template>
  <div>
    <div class="header">
      <div class="left_font">控软</div>
      <div class="center_box"></div>
      <div class="right_font">静态资源系统</div>
    </div>
    <div v-if="status == undefined">
      <div class="second">
        <div class="second_font">
          <span @click="blackbtn" style="cursor: pointer">Index of / Adoptium </span> /
          <span v-for="(item, index) in arr" :key="item.id" @click="Black(item, index)" style="cursor: pointer"
            >{{ item.name }}/</span
          >
        </div>
        <div class="second_date">Last update: <span>2020-03-24 09:35</span></div>
      </div>
      <div class="footer">
        <table style="width: 100%">
          <tr style="border-bottom: 1px solid rgb(195, 191, 191)">
            <td style="color: #1892ce">File Name</td>
            <td style="color: #1892ce">File Size</td>
            <td style="color: #1892ce">Date</td>
          </tr>
          <tr v-for="(item, index) in data" :key="index">
            <td @click="dataBtn(item, index)" style="cursor: pointer; color: #1892ce">{{ item.name }}</td>
            <td>{{ item.size }}</td>
            <td>{{ item.date }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div
      v-else-if="status == 401 || status == 404"
      style="text-align: center; line-height: 90vh; font-size: 150px; color: #bbbbbb"
    >
      404
    </div>
    <div
      v-else-if="status == 403 || status == 403"
      style="text-align: center; line-height: 90vh; font-size: 150px; color: #bbbbbb"
    >
      403
    </div>
  </div>
</template>

<script>
import { httpAction, getAction, getFileAccessHttpUrl, shareIndexurl } from '../../api/manage'
import { openpdfile } from '../../api/login'
export default {
  data() {
    return {
      url: '/shareInfo/shareInfo/ListOpenByUrl',
      paths: '/shareInfo/shareInfo/accessFile',
      data: [],
      arr: [],
      obj: {},
      visible: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      status: '',
    }
  },
  mounted() {
    const objdata = this.$route.query
    this.obj = this.$route.query
    this.datalist(objdata)
  },
  methods: {
    //获取分享链接的数据
    datalist(data) {
      const httpurl = this.url
      const method = 'post'
      const params = {
        type: 1,
        batch: 3,
        url: data.url ? data.url : location.href,
      }
      getAction(httpurl, params, method).then((res) => {
        if (res.code == 200) {
          this.data = res.result
          this.status = res.result[0].stats
        } else {
          this.status = res.result[0].stats
        }
      })
    },
    dataBtn(data, index) {
      console.log(data, 'data')
      if (data.fileSuffix != null) {
        const path = data.filePath

        if (data.fileSuffix == 'pdf') {
          const params = {
            id: data.id,
          }
          openpdfile(params).then((res) => {
            const blob = new Blob([res], { type: `application/${data.fileSuffix}` })
            // 创建一个指向Blob的URL
            const url = window.URL.createObjectURL(blob)
            // 在新标签页中打开PDF
            window.open(url)
          })
        } else if (data.fileSuffix == 'png' || data.fileSuffix == 'jpg' || data.fileSuffix == 'jpeg') {
          // window.open(path,'_blank')
          const params = {
            id: data.id,
          }
          openpdfile(params).then((res) => {
            const blob = new Blob([res], { type: `image/${data.fileSuffix}` })
            // 创建一个指向Blob的URL
            const url = window.URL.createObjectURL(blob)
            // 在新标签页中打开PDF
            window.open(url)
          })
        } else {
          const params = {
            id: data.id,
          }
          openpdfile(params).then((res) => {
            const blob = new Blob([res], { type: `image/${data.fileSuffix}` })
            const url = window.URL.createObjectURL(blob)
            console.log(url, 'blob')
            // 创建一个a标签，设置href属性为URL对象的URL，设置download属性为要保存的文件名
            const a = document.createElement('a')
            a.href = url
            a.download = `${data.fileSuffix}.${data.fileSuffix}`
            a.style.display = 'none'
            document.body.appendChild(a)
            // 模拟点击a标签来下载文件
            a.click()
            // 释放URL对象
            window.URL.revokeObjectURL(url)
          })
        }
      } else {
        this.arr.push(data)
        const httpurl = this.url
        const method = 'post'
        console.log(this.$router.currentRoute.fullPath,'this.$router.currentRoute.fullPath');
        const addressUrl = this.$router.currentRoute.fullPath
        const params = {
          id: data.id,
          type: data.type,
          batch: '3',
          addressUrl: addressUrl,
        }
        getAction(httpurl, params, method).then((res) => {
          this.data = res.result
        })
      }
    },
    //返回上一级
    Black(item, index) {
      const httpurl = this.url
      const method = 'post'
      const addressUrl = this.$router.currentRoute.fullPath
      const params = {
        id: item.id,
        type: item.type,
        batch: '3',
        addressUrl: addressUrl,
      }
      getAction(httpurl, params, method).then((res) => {
        this.data = res.result
        this.arr.splice(index + 1, 1)
      })
    },
    //返回根目录
    blackbtn() {
      console.log(this.obj, 'obj')
      const httpurl = this.url
      const method = 'post'
      const params = {
        id: this.obj.id,
        type: this.obj.type ? this.obj.type : 1,
        batch: this.obj.batch ? this.obj.batch : 3,
        url: this.obj.url ? this.obj.url : location.href,
      }
      getAction(httpurl, params, method).then((res) => {
        this.data = res.result
        this.arr = []
      })
    },
    handleOk() {
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgb(195, 191, 191);
  display: flex;
  align-items: center;
  .left_font {
    font-size: 32px;
    font-weight: 800;
    padding-left: 60px;
  }
  .center_box {
    padding-left: 20px;
    height: 25px;
    border-right: 2px solid rgb(7, 7, 7);
  }
  .right_font {
    padding-left: 20px;
    font-size: 20px;
    font-weight: 400;
  }
}
.second {
  height: 80px;
  // border-bottom: 1px solid rgb(195, 191, 191);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .second_font {
    font-size: 26px;
    padding-left: 20px;
    line-height: 80px;
  }
  .second_date {
    font-size: 18px;
    padding-right: 40px;
    line-height: 80px;
  }
}
.footer {
  padding-left: 20px;
  padding-right: 20px;
}
</style>
